import { useState } from 'react'
import style from './index.module.less'
import { Button } from 'antd-mobile'
import { DownFill } from 'antd-mobile-icons'
import classNames from 'classnames'
import Title from '@components/title'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'

function Item ({ data = {}, caseid = '' }) {
  const dispatch = useAppDispatch()
  const [active, setActive] = useState(false)
  return (
    <div className={classNames(style.item, { [style.active]: active })} onClick={() => {
      setActive(true)
      dispatch(push({ element: 'editEvidence', meta: { id: data.id, caseid } }))
      setTimeout(() => {
        setActive(false)
      }, 150)
    }}>
      <div className={style.left}>
        <div className={style['left-inner']}>
          <span className={style['left-inner-text']}>{data.name}</span>
        </div>
      </div>
      <div className={style.right}>
        <DownFill className={style['right-icon']} />
      </div>
    </div>
  )
}

function Main ({ data = [], caseid = '' }) {
  const dispatch = useAppDispatch()
  return (
    <>
      <Title title='证据材料' />
      <div className={classNames(style.container)}>
        <div className={style.inner}>
          <div className={style.list}>
            {
              data.map((li, i) => {
                return <Item key={i} data={li} caseid={caseid} />
              })
            }
          </div>
          <div className={style.operate}>
            <Button className={style.btn} block onClick={() => {
              dispatch(push({ element: 'editEvidence', meta: { id: '', caseid } }))
            }}>添加证据材料</Button>
          </div>
        </div>
      </div>
    </>
    
  )
}

export default Main
